<template>
  <div class="change-write">

    <v-step :list="barList" :step="2" :titleType=3></v-step>

    <div class="line-box"></div>
    <div class="wrap-box">
      <div class="title1">银行卡号:</div>
      <div class="title2 bankName"><input type="text" maxlength="19" placeholder="请输入银行卡号" class="input-box"
                                          v-model="cardNo"
                                          @input="checkCardNum" @blur="inputBlur"/></div>
      <div class="title3">
        <img src="../../assets/img/icon_1.png" class="icon" v-if="showName === 1" onclick="return false"/>
        <img src="../../assets/img/icon_2.png" class="icon" v-else-if="showName === 2" onclick="return false"/>
      </div>
    </div>

    <div class="wrap-box">
      <div class="title1">银行名称:</div>
      <div class="title2 bankName" @click="open">
        <span class="bank">{{bankName}}</span>
      </div>
      <div class="title3"><img src="./pull.png" class="pull" onclick="return false"/></div>
    </div>

    <div class="wrap-box">
      <div class="title1">银行卡归属地:</div>
      <div class="title2 address">
        <x-address :title="title" v-model="value" :list="addressData" placeholder="请选择银行卡归属地" :show.sync="showAddress"
                   @on-hide="selectArea"
                   id="belongAddr"></x-address>
      </div>
      <div class="title3"><img src="./pull.png" class="pull" onclick="return false"/></div>
    </div>

    <div class="tip-text-box">温馨提示：银行卡归属地是银行卡开户行所在地，若银行卡归属地地址填写错误，则会影响提现到账时间。</div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn" @click="confirmChange">确定换绑</button>
    </div>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="chance"></v-dialog>
    <v-dialog v-model="sendVal" :content="content" type="default" @sure="sure"></v-dialog>

    <div class="bank-box" v-show="showBank">
      <div class="bank-list">
        <div class="name" v-for="(item,index) in bankList" :key="index" @click="selectBank(item)">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import flowStep from "../../components/flow"
  import {XAddress, ChinaAddressV4Data} from 'vux'
  import dialog from "../../components/dialog"
  import {baseUrl} from "../../config/env"

  export default {
    data() {
      return {
        userName: "",
        certNo: "",
        cardNo: "",
        bankArea: "",
        showName: "",
        title: '',
        value: [],
        addressData: ChinaAddressV4Data,
        showAddress: false,
        modalVal: false,
        sendVal: false,
        modal: "",
        content: "",
        bankName: "请选择银行名称",
        showBank: false,
        bankList: ["招商银行", "兴业银行", "中国建设银行", "中国工商银行", "中国农业银行", "中国银行", "交通银行", "中国邮政储蓄银行", "光大银行", "广发银行", "平安银行", "华夏银行", "浙商银行"],
        barList: ['工资卡信息', '银行卡扫描', '银行卡信息'],
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      let number = sessionStorage.getItem("card_no");
      if (number != "" && number != undefined) {
        this.cardNo = this.$decruption(number);
      }
      let bankName = sessionStorage.getItem("bank_name");
      if (bankName) {
        if (bankName.indexOf("招商") != -1) {
          this.bankName = "招商银行";
        } else if (bankName.indexOf("建设") != -1) {
          this.bankName = "中国建设银行";
        } else if (bankName.indexOf("兴业") != -1) {
          this.bankName = "兴业银行";
        } else if (bankName.indexOf("农业") != -1) {
          this.bankName = "中国农业银行";
        } else if (bankName.indexOf("工商") != -1) {
          this.bankName = "中国工商银行";
        } else if (bankName.indexOf("中国银行") != -1) {
          this.bankName = "中国银行";
        } else if (bankName.indexOf("交通") != -1) {
          this.bankName = "交通银行";
        } else if (bankName.indexOf("邮储") != -1) {
          this.bankName = "中国邮政储蓄银行";
        } else if (bankName.indexOf("光大") != -1) {
          this.bankName = "光大银行";
        } else if (bankName.indexOf("广发") != -1) {
          this.bankName = "广发银行";
        } else if (bankName.indexOf("平安") != -1) {
          this.bankName = "平安银行";
        } else if (bankName.indexOf("华夏") != -1) {
          this.bankName = "华夏银行";
        } else if (bankName.indexOf("浙商") != -1) {
          this.bankName = "浙商银行";
        }
      }
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      checkCardNum() {//校验银行卡号
        var reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/;
        if (!reg.test(this.cardNo)) {
          this.showName = 2;
        } else {
          this.showName = 1;
        }
      },
      checkBankArea(area) {//校验归属地
        var reg = /^(\d{16}|\d{17}|\d{18}|\d{19})$/; //银行卡号
        if (this.cardNo == "" || this.cardNo == null) {
          this.$vux.toast.text("请输入银行卡号", "middle");
          return;
        } else if (!reg.test(this.cardNo)) {
          this.$vux.toast.text("请输入正确的银行卡号", "middle");
          return;
        }
        if (this.bankName == "" || this.bankName == null || this.bankName == "请选择银行名称") {
          this.$vux.toast.text("请选择银行名称", "middle");
          return;
        }
        if (area == "" || area == null) {
          this.$vux.toast.text("请选择银行卡归属地", "middle");
          return;
        }
        return true;
      },
      backPage() {
        this.$router.push("/changecard_cardscan")
      },
      confirmChange() {//确定换绑
        let address = document.getElementById("belongAddr").innerText.substring(0, 9);
        let area = address == "请选择银行卡归属地" ? "" : document.getElementById("belongAddr").innerText; //银行卡归属地
        if (this.checkBankArea(area)) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let array = area.split(" ");
          if (array.length == 1) {
            this.bankArea = array[0].replace('\n', "");
          } else {
            this.bankArea = area.replace(/\s*/g, "");
          }
          this.userName = sessionStorage.getItem("bank_user_name"); //姓名
          this.certNo = this.$decruption(sessionStorage.getItem("identity_no")); //身份证号

          let base64 = require('js-base64').Base64;
          let userSign = base64.decode(sessionStorage.getItem("openid"));
          let data = {
            "userName": this.userName,
            "identityNo": this.$encruption(this.certNo),
            "bankNumber": this.$encruption(this.cardNo),
            "openBankAddr": this.bankArea,
            "moneyPassword": "",
            "type": 2,
            "bankName": this.bankName
          };
          this.axios.post(baseUrl + "/userbank/bindunbind_bankcard?sgin=" + userSign, data).then((res) => {
            let bindObj = res.data;
            this.$vux.loading.hide();
            if (bindObj.code == 0 && bindObj.data != null) {
              if (bindObj.data.res_code == 0) {
                this.$router.push("/change_success");
              } else if (bindObj.data.res_code == 20029) {
                this.modal = "很遗憾,今日绑定机会已使用完,请明日再进行绑定";
                this.modalVal = true;
              } else {
                this.content = "您今日还剩" + bindObj.data.res_error_num + "次机会,请仔细核对您的信息(" + bindObj.data.res_msg + ")";
                this.sendVal = true;
              }
            } else {
              this.$vux.toast.text(bindObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      },
      chance() {
        this.modalVal = false;
      },
      sure() {
        this.sendVal = false;
      },
      inputBlur() {
        window.scrollTo(0, 0)
      },
      selectBank(name) {//选择银行
        this.bankName = name;
        this.showBank = false;
      },
      open() {
        this.showBank = true;
      },
      selectArea(type, value) {//选择银行卡归属地
        if (type) {
          let array = value.split(" ");
          if (array[0] == array[1]) {
            this.value.pop();
          }
        }
      },
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      "v-step": flowStep,
      "v-dialog": dialog,
      XAddress
    }
  }
</script>

<style lang="stylus" scoped>
  .change-write
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      display: flex
      align-items: center
      margin-left: 3.6%
      width: 96.4%
      height: 1.333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title1
        height: 0.56rem
        line-height: 0.56rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
      .title2
        padding-left: 0.107rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
        .input-box
          width: 100%
          vertical-align: middle
          line-height: 0.56rem
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
      .bankName
        height: 0.6rem
        line-height: 0.6rem
        width: 60%
        .bank
          display: block
          width: 100%
          font-size: 0.44rem
          color: rgba(68, 68, 68, 1)
      .address
        width: 53%;
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        display: flex
        padding-top: 0.1rem
        padding-bottom: 0.1rem
      .address >>> .weui-cell .vux-popup-picker-placeholder
        color: #cccccc
      .address >>> .weui-cell .vux-popup-picker-value
        color: rgba(68, 68, 68, 1)
      .title3
        margin-left: auto;
        margin-right: 0.373rem;
        .icon
          width: 0.533rem
          height: 0.533rem
        .pull
          width: 0.387rem
          height: 0.213rem
    .tip-text-box
      width: 92%
      margin-left: 3.2%
      padding-top: 0.267rem
      font-size: 0.373rem
      color: rgba(255, 93, 93, 1)
      line-height: 0.48rem
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      height: 1.333rem
      text-align: center
      .btn
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
    .bank-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .bank-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        width: 100%
        height: 3.88rem
        background: #FFF
        overflow: auto
        .name
          display: flex
          align-items: center
          justify-content: center
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          font-size: 0.44rem
          color: #666666
          &:hover
            color: #3CAFFF
</style>
